<template>
  <div id="video" class="embed-responsive embed-responsive-16by9 video-embed-box" @mouseleave="unHover"></div>
</template>

<script>
export default {
  name: 'CkPlayer',
  data () {
    return {
      player: ''
    }
  },
  props: ['message'],
  mounted () {
    /* eslint-disable */
    this.init()
    /* eslint-disable */
  },
  methods: {
    init () {
      let videoObject = {
        container: '#video', // 容器的ID或className
        variable: 'player', // 播放函数名称
        poster: '../material/poster.jpg', // 封面图片
        loaded: 'loadedHandler',
        flashplayer: true,
        debug: false,
        video: '',
        html5m3u8: true,
        mobileCkControls: true
      }
      videoObject.video = this.message.video
      this.player = new ckplayer(videoObject)
    },
    unHover () {
      this.player.changeControlBarShow(false)
    },
    newDanmu () {
      //弹幕说明
      let danmuObj = {
        list: [{
          type: 'image', // 定义元素类型：只有二种类型，image=使用图片，text=文本
          file: '../material/logo.png', // 图片地址
          radius: 30, // 图片圆角弧度
          width: 30, // 定义图片宽，必需要定义
          height: 30, // 定义图片高，必需要定义
          alpha: 0.9, // 图片透明度(0-1)
          marginLeft: 10, // 图片离左边的距离
          marginRight: 10, // 图片离右边的距离
          marginTop: 10, // 图片离上边的距离
          marginBottom: 10, // 图片离下边的距离
          clickEvent: 'link->http://'
        }, {
          type: 'text', // 说明是文本
          text: '演示弹幕内容，弹幕只支持普通文本，不支持HTML', // 文本内容
          color: '0xFFDD00', // 文本颜色
          size: 14, // 文本字体大小，单位：px
          font: '"Microsoft YaHei", YaHei, "微软雅黑", SimHei, "\\5FAE\\8F6F\\96C5\\9ED1", "黑体", Arial', // 文本字体
          leading: 30, // 文字行距
          alpha: 1, // 文本透明度(0-1)
          paddingLeft: 10, // 文本内左边距离
          paddingRight: 10, // 文本内右边距离
          paddingTop: 0, // 文本内上边的距离
          paddingBottom: 0, // 文本内下边的距离
          marginLeft: 0, // 文本离左边的距离
          marginRight: 10, // 文本离右边的距离
          marginTop: 10, // 文本离上边的距离
          marginBottom: 0, // 文本离下边的距离
          backgroundColor: '0xFF0000', // 文本的背景颜色
          backAlpha: 0.5, // 文本的背景透明度(0-1)
          backRadius: 30, // 文本的背景圆角弧度
          clickEvent: 'actionScript->videoPlay'
        }],
        x: '100%', // x轴坐标
        y: "50%", // y轴坐标
        //position:[2,1,0],//位置[x轴对齐方式（0=左，1=中，2=右），y轴对齐方式（0=上，1=中，2=下），x轴偏移量（不填写或null则自动判断，第一个值为0=紧贴左边，1=中间对齐，2=贴合右边），y轴偏移量（不填写或null则自动判断，0=紧贴上方，1=中间对齐，2=紧贴下方）]
        alpha: 1,
        //backgroundColor:'#FFFFFF',
        backAlpha: 0.8,
        backRadius: 30 // 背景圆角弧度
      }
      let danmu = this.player.addElement(danmuObj);
      let danmuS = this.player.getElement(danmu);
      let obj = {
        element: danmu,
        parameter: 'x',
        static: true, // 是否禁止其它属性，true=是，即当x(y)(alpha)变化时，y(x)(x,y)在播放器尺寸变化时不允许变化
        effect: 'None.easeOut',
        start: null,
        end: -danmuS['width'],
        speed: 10,
        overStop: true,
        pauseStop: true,
        callBack: 'deleteChild'
      };
      let danmuAnimate = this.player.animate(obj);
    },
    hideDanmu () {
      // 隐藏弹幕
      this.player.elementShow('',false)
    },
    showDanmu () {
      // 显示弹幕
      this.player.elementShow('',true)
    }
  }
}
</script>

<style scoped>

</style>
